<template>
  <svg @contextmenu.prevent.stop="checkState">
    <g :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')'" class="cursor-pointer">
      <rect width="40" height="85" fill="transparent" x="30" y="0"/>
        <g :transform="'translate(' + textTranslateX + ',' + textTranslateY + ')'" v-if="name">
            <text x="75" y="45" fill="#FFFFFF">{{name}}</text>
        </g>

      <template v-if="state == 1">

        <line x1="50" y1="10" x2="30" y2="25" stroke="#FF5B41" stroke-width="4"></line>
        <line x1="50" y1="10" x2="70" y2="25" stroke="#FF5B41" stroke-width="4"></line>
        <line x1="50" y1="75" x2="30" y2="65" stroke="#FF5B41" stroke-width="4"></line>
        <line x1="50" y1="75" x2="70" y2="65" stroke="#FF5B41" stroke-width="4"></line>
      </template>
      <template v-else>
          <g transform="translate(18,-10)">
              <rect width="40" height="30" fill="#000" x="30" y="-5"></rect>
              <line x1="50" y1="10" x2="30" y2="25" stroke="#87D66E" stroke-width="4"></line>
              <line x1="50" y1="10" x2="30" y2="-5" stroke="#87D66E" stroke-width="4"></line>
          </g>

              <rect width="40" height="30" fill="#000" x="30" y="60"></rect>
              <line x1="50" y1="75" x2="30" y2="90" stroke="#87D66E" stroke-width="4"></line>
              <line x1="50" y1="75" x2="30" y2="60" stroke="#87D66E" stroke-width="4"></line>


      </template>
    </g>
  </svg>
</template>
<script>
import {submitOperateRecord} from "@/api/api";

export default {
  props: {
      jg_name: {
          type: String,
          default: ""
      },
      info:{
          type: Object,
          default: function () {
              return {}
          }
      },
      scale:{
          type: Number,
          default: 1
      },
      stateDesc:{
          type: String,
          default: ""
      },
      isMainPage:{
          type: Boolean,
          default: false
      },
      brandInfo:{
          type: String,
          default: ""
      },
      bottomTranslateY:{
          type: Number,
          default: 10
      },
      data_id:{
          type: String,
          default: ''
      },
      name: {
          required: false, // 控件名称
          type: String
      },
      state: {    // 控件状态
          required: true,
          type: Number,
          default: 0
      },
      controlIndex: { // 控件索引
          required: false,
          type: Number,
      },
      translateX: { // x轴偏移，默认0
          type: Number,
          default: 0
      },
      translateY: { // y轴偏移，默认0
          type: Number,
          default: 0
      },
      rotate: {  // z轴旋转角度,注意不是原地旋转，需要根据x、y轴偏移来调整
          type: Number,
          default: 0
      },
      textTranslateX: { // 文本x偏移
          type: Number,
          default: 0
      },
      textTranslateY:{
          type: Number,
          default: 0
      },
  },
  methods: {
      checkState(){
          this.desc=this.$store.state.operDescData.find(item=>item.type==='jc'&&item.comType==='开关').desc;
          this.desc=this.desc.replace('jgName',this.info.jg_name).replace('devName',this.info.state_desc).replace('state', (Number(this.state) === 0 ? "分" : "合"))
          submitOperateRecord( {log_desc:this.desc})
      },
  }
}
</script>
<style lang="less" scoped>
svg {
  transform-origin: center center;
}
.cursor-pointer {
  cursor: pointer;
}
</style>
